<template>
    <div>
        <div class="outmain ba_f infastorder">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>快餐订单</span>
                </div>
            </div>
          <el-tabs v-model="orderType" class="mar_b20" @tab-click="handleTabClick2">
            <el-tab-pane label="订单管理" name="1"></el-tab-pane>
            <el-tab-pane label="订单查询" name="2"></el-tab-pane>
          </el-tabs>
            <div class="ba_f8 pad_20 mar_b20">
                <div class="lh25 mar_t10 msgtext fon_12">
                    温馨提示：<br>
                    1、此功能建议配合云喇叭+小票机打印更方便高效，叫号功能需先配置百度云语音Ai功能；<br>
                    2、订单排号大屏幕：<span @click="chickScreen" class="subjectcolor2 curs">{{path}}</span><br>
                </div>
            </div>
            <div class="flex-bet flex-y-top">
                <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
                    <div>
                        <el-form-item label="订单号" class="mar_l20">
                            <el-input v-model="formInline.keyword" size="medium" placeholder="请输入订单号"
                                      @input="onSearch"></el-input>
                        </el-form-item>
                        <el-form-item label="下单时间" class="mar_l20">
                            <el-radio-group v-model="formInline.tabPosition" class="mar_r20" @change="onSearch">
                                <el-radio-button label="1">今天</el-radio-button>
                                <el-radio-button label="2">昨天</el-radio-button>
                                <el-radio-button label="3">一周</el-radio-button>
                                <el-radio-button label="0">全部</el-radio-button>
                            </el-radio-group>
                            <el-date-picker
                                    v-model="formInline.timeData"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item class="mar_l20">
                            <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
                            <el-button size="medium" @click="getCode">查看快餐码</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div class="flex-bet flex-y-top mar_t20" v-cloak>
                <div class="bflex-7 orderLeft">
                  <el-tabs v-model="activeName" class="mar_b20" @tab-click="handleTabClick">
                    <el-tab-pane label="待完成" name="1"></el-tab-pane>
                    <el-tab-pane label="已完成" name="2"></el-tab-pane>
                    <el-tab-pane label="已取消" name="3"></el-tab-pane>
                    <el-tab-pane label="全部" name="0"></el-tab-pane>
                  </el-tabs>
                    <div v-if="orderListData && orderListData.length>0">
                        <div class="orderList pad_20 flex-bet curs"
                             v-for="(item,index) in orderListData" :key="index"
                             :class="{'orderListHover':orderListHover==index}"
                             @click="clickOrderList(item,index)"
                        >
                          <div class="flex-g-0 number fon_16" :class="item.isOut=='2'?'number2':'number'">{{ item.callNo }}</div>
                            <div class="flex-g-1 wei fon_12 color_3 mar_l10">
                                <div class="flex-bet">
                                    <div>支付时间：{{item.payAt}}</div>
                                    <div v-if="item.callNum>0">叫号次数：{{item.callNum}}</div>
                                </div>
                                <div class="flex-bet">
                                    <div>订单号：{{ item.outTradeNo }}</div>
                                    <div class=""></div>
                                </div>
                                <div class="flex-bet">
                                  <div>实付金额：{{ item.money }}
                                    <span class="mar_l5 color-green" v-if="item.state==2 || item.state==3 || item.state==4 || item.state==6 || item.state==8">(已支付)</span>
                                    <span class="mar_l5 color-red" v-if="item.state==7 || item.state==9">(已退款)</span>
                                  </div>
                                  <div>
                                    <div class="msgNumber">
                                      <span v-if="item.state=='2'" class="type bg3">待接单</span>
                                      <span v-if="item.state=='3'" class="type bg2">制作中</span>
                                      <span v-if="item.state=='4'" class="type bg4">已完成</span>
                                      <span v-if="item.state=='5'" class="type bg4">已取消</span>
                                      <span v-if="item.state=='6'">申请退款</span>
                                      <span v-show="item.state=='7'" class="color-red">退款成功</span>
                                      <span v-if="item.state=='8'">拒绝退款</span>
                                      <span v-if="item.state=='9'" class="color-red">商户拒单并退款</span>
                                    </div>
                                  </div>
                                </div>
                                <div class="flex">
                                  <div>消费方式:</div>
                                  <div class="mar_l10">
                                    <div class="type2" v-if="item.isOut=='1'">店内就餐</div>
                                    <div class="type2" v-if="item.isOut=='2'">打包带走</div>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="page.total"
                                :page-size="page.size"
                                :current-page.sync='page.currentPage'
                                :hide-on-single-page="page.value"
                                @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                    <div v-show="orderListData.length==0" class="zwsj flex-center">
                        <div class="t_c">
                            <div><img src="../../../assets/img/order/quxiaodan.png" style="width: 180px;height: 180px;"/></div>
                            <div class="mar_t10">暂无订单</div>
                        </div>
                    </div>
                </div>
                <div class="bflex-3 orderMsg pad_20"
                     v-if="orderListData && orderListData.length>0">
                    <div v-for="(ditem,dindex) in orderListData[orderListHover].detail" :key="dindex">
<!--                        <div class="msgNumber">状态：-->
<!--                            <span v-show="ditem.state=='2'">待接单</span>-->
<!--                            <span v-show="ditem.state=='3'">制作中</span>-->
<!--                            <span v-show="ditem.state=='4'">已完成</span>-->
<!--                            <span v-show="ditem.state=='5'">已取消</span>-->
<!--                            <span v-show="ditem.state=='6'">申请退款</span>-->
<!--                            <span v-show="ditem.state=='7'">退款通过</span>-->
<!--                            <span v-show="ditem.state=='8'">拒绝退款</span>-->
<!--                            <span v-show="ditem.state=='9'">拒单</span>-->
<!--                        </div>-->
                        <div class="shuju_title">
                            <div class="shuju_title_text">
                                <span>顾客信息</span>
                            </div>
                        </div>
                        <div class="bor_b_de4 pad_b_10 fon_12 lh25 color_6">
                            <div class="flex">
                                <div class="bflex-5"><span class="wei">用户昵称</span>：
                                  <span v-if="ditem.origin!='5'">{{ ditem.userName }}(uid:{{ ditem.userId }})</span>
                                  <span v-else>无</span>
                                </div>
                                <div class="bflex-5"><span class="wei">手机号：</span>
                                  <span v-if="ditem.origin!='5'">{{ ditem.userTel }}</span>
                                  <span v-else>无</span>
                                </div>
                            </div>
                        </div>
                        <div class="shuju_title">
                            <div class="shuju_title_text">
                                <span class="wei">订单信息</span>
                            </div>
                        </div>
                        <div class="bor_b_de4 pad_b_10 fon_12 lh25 color_6">
                            <div class="flex">
                              <div class="bflex-5">
                                <span class="wei">订单来源：</span>
                                <span v-if="ditem.origin=='1'">微信小程序</span>
                                <span v-if="ditem.origin=='2'">微信公众号</span>
                                <span v-if="ditem.origin=='3'">支付宝小程序</span>
                                <span v-if="ditem.origin=='4'">百度小程序</span>
                                <span v-if="ditem.origin=='5'">收银台下单</span>
                              </div>
                                <div class="bflex-5"><span class="wei">取单号：</span>
                                    {{ditem.callNo}}
                                </div>
                            </div>
                            <div class="flex">
                                <div class="bflex-5">
                                    <span class="wei">消费方式：</span>
                                    <span v-if="ditem.isOut=='1'">店内就餐</span>
                                    <span v-if="ditem.isOut=='2'">打包带走</span>
                                </div>
                              <div class="bflex-5"><span class="wei">订单号：</span>{{ditem.outTradeNo}}</div>
                            </div>
                            <div class="flex">
                              <div class="bflex-5"><span class="wei">订单金额：</span>{{(+ditem.money)+(+ditem.allPreferential)}}<span v-if="ditem.vipDiscount>0">（会员优惠：{{ditem.vipDiscount}}）</span></div>
                                <div class="bflex-5"><span class="wei">订单优惠：</span>{{ditem.allPreferential}}</div>
                            </div>
                            <div class="flex">
                                <div class="bflex-5"><span class="wei">实付金额：</span><span class="color_rb wei">{{ditem.money}}</span>
                                </div>
                                <div class="bflex-5"><span class="wei">支付方式：</span>
                                  <span v-if="ditem.payMode=='1'">微信支付</span>
                                  <span v-if="ditem.payMode=='2'">支付宝支付</span>
                                  <span v-if="ditem.payMode=='3'">百度支付</span>
                                  <span v-if="ditem.payMode=='4'">公众号支付</span>
                                  <span v-if="ditem.payMode=='5'">余额支付</span>
                                  <span v-if="ditem.payMode=='6'">线下支付（现金支付）</span>
                                  <span v-if="ditem.payMode=='7'">线下支付（pos机支付）</span>
                                  <span v-if="ditem.payMode=='8'">线下支付（自有微信支付）</span>
                                  <span v-if="ditem.payMode=='9'">线下支付（自有支付宝支付）</span>
                                </div>
                            </div>
                        </div>
                        <div class="goodsList">
                            <el-table
                                    :data="orderListData[orderListHover].goodsArr"
                                    stripe
                                    height="250"
                                    style="width: 100%">
                                <el-table-column
                                        label="商品"
                                        prop="name"
                                        width="300"
                                >
                                    <template slot-scope="scope">
                                        <div class="flex wei">{{scope.row.name}}</div>
                                        <div v-show="scope.row.data">规格：{{scope.row.data}}</div>
                                        <div v-show="scope.row.attribute">属性：{{scope.row.attribute}}</div>
                                        <div v-show="scope.row.material">加料：{{scope.row.material}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="num"
                                        label="数量"
                                >
                                    <template slot-scope="scope">
                                        <div>X{{scope.row.num}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="money"
                                        label="金额"
                                >
                                </el-table-column>
                            </el-table>
                            <div class="flex flex-col-end fon_14 mar_r10 mar_t5" v-if="ditem.isOut=='2'">
                              <div>包装费：{{ditem.tablewareMoney}}元</div>
                            </div>
                        </div>
                        <div class="pad_10 t_c anniu">
                          <el-button plain size="medium" v-if="activeName!='1'"
                                     @click="modifyFastOrder(ditem.id,'print')">打印小票
                          </el-button>
                          <el-button type="primary" size="medium" class="jiedan" v-if="ditem.state=='2'"
                                     @click="modifyFastOrder(ditem.id,'receipt')">接单并打印
                          </el-button>
                          <el-button size="medium" type="danger" v-if="ditem.state=='2' && (ditem.origin!='5' && ditem.payMode!='6' && ditem.payMode!='7' && ditem.payMode!='8' && ditem.payMode!='9')"
                                     @click="modifyFastOrder(ditem.id,'rejection')">拒单并退款
                          </el-button>
                          <el-button type="primary" size="medium" v-if="ditem.state=='3'"
                                     @click="modifyFastOrder(ditem.id,'call')">取单并叫号
                          </el-button>
                          <el-button size="medium" type="danger" v-if="ditem.state=='3'"
                                     @click="modifyFastOrder(ditem.id,'refund')">退款
                          </el-button>
                          <el-button type="success" size="medium" v-if="ditem.state=='3'"
                                     @click="modifyFastOrder(ditem.id,'confirm')">完成
                          </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      <el-dialog
          title="查看小程序码"
          :visible.sync="dialogFormVisible"
          width="600px"
          :close-on-click-modal="false"
      >
        <div class="t_c">
          <div class="pad_20">
            <img :src="codeimg" style="width: 200px;height: 200px;">
          </div>
        </div>
      </el-dialog>
      <div style="height: 0; overflow: hidden">
        <KcPrint :data="printData" ref="kcprint" />
      </div>
    </div>
</template>
<script>
    import {fastOrderList, modifyFastOrder} from "@/api/instore";
    import index from "../../../api/index";
    import {changeDate} from "@/utils/index";
    import {mapState} from "vuex";
    import {getCode} from "@/api/setup";
    import {orderContent} from '@/api/order';
    import KcPrint from "@/components/printTem/kcPrint";

    export default {
      components: {KcPrint},
        computed: {
            ...mapState(['storeId']),
        },
        created() {
            this.init();
            this.fetchData();
        },
        data() {
            return {
              orderType: '1',
                path: '',
                activeName: '1',
                formInline: {
                    tabPosition: '1',
                    keyword: '',
                    timeData: [],
                },
                form: {
                    goodsSet: [],
                    enterStore: '1',
                    showType: '1',
                    distance: '',
                },
                orderListHover: 0,
                orderListData: [],
                listLoading: false,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
              dialogFormVisible: false,
              codeimg: '',
              printData:{},
            }
        },
        methods: {
          handleTabClick2() {
            if (this.orderType == '1') {
              this.$router.push(`/storeinfastorder?orderType=1`);
            } else if (this.orderType == '2') {
              this.$router.push(`/storeinfastorderquery?orderType=2`);
            }
          },
            async init() {
                const publishUrl = `https://bkycms.com/addons/yb_wm/views/channel/index/index.html#/fastScreen?storeId=${this.storeId}`
                const backendPath = index.isDev ? publishUrl : location.href.match(/(\S*)views/)[1] + `views/channel/index/index.html#/fastScreen?storeId=${this.storeId}`
                this.path = backendPath
            },
            async fetchData() {
                var params = {
                    page: this.page.currentPage,
                    timeType: this.formInline.tabPosition,
                    keyword: this.formInline.keyword,
                    state: this.activeName,
                    startTime: this.formInline.timeData[0] ? changeDate(this.formInline.timeData[0]) : '',
                    endTime: this.formInline.timeData[1] ? changeDate(this.formInline.timeData[1]) : '',
                    storeId:this.storeId,
                }
                const {data, count} = await fastOrderList(params);
                this.orderListData = data ? data : [];
                this.page.total = count;
            },
            onSearch() {
                this.fetchData()
            },
            handleTabClick() {
                this.orderListHover = 0
                this.page.currentPage=1
                this.fetchData()
            },
            handleCurrentChange(val) {
                this.orderListHover = 0
                this.page.currentPage = val;
                this.fetchData()
            },
            chickScreen() {
                let routeData = this.$router.resolve({path: `/fastScreen?storeId=${this.storeId}`, query: {}});
                window.open(routeData.href, '_blank');
            },
            clickOrderList(item, index) {
                this.orderListHover = index
            },
            async modifyFastOrder(orderId, type) {
                if (type == 'receipt') {
                    const {msg} = await modifyFastOrder({orderId, type,});
                    this.$baseMessage(msg, "success");
                    const { data } = await orderContent({orderId,orderType:3});
                    Object.keys(data).map(key=>{
                      this.printData = data[key];
                      this.$nextTick(() => {
                        this.$refs.kcprint.printElement(key);
                      });
                    })
                    this.fetchData()
                } else if (type == 'rejection') {
                    this.$baseConfirm("您确定拒绝此订单吗", null, async () => {
                        const {msg} = await modifyFastOrder({orderId, type,});
                        this.$baseMessage(msg, "success");
                        this.fetchData()
                    });
                } else if (type == 'confirm') {
                    this.$baseConfirm("您确定完成此订单吗", null, async () => {
                        const {msg} = await modifyFastOrder({orderId, type,});
                        this.$baseMessage(msg, "success");
                        this.fetchData()
                    });
                } else if (type == 'call') {
                    const {data, msg} = await modifyFastOrder({orderId, type,});
                    let audio = new Audio()
                    audio.src = data
                    audio.play();
                    this.$baseMessage(msg, "success");
                    this.fetchData()
                } else if (type == 'print') {
                    const {msg} = await modifyFastOrder({orderId, type,});
                    this.$baseMessage(msg, "success");
                    const { data } = await orderContent({orderId,orderType:3});
                    Object.keys(data).map(key=>{
                      this.printData = data[key];
                      this.$nextTick(() => {
                        this.$refs.kcprint.printElement(key);
                      });
                    })
                    this.fetchData()
                } else if (type == 'refund') {
                  this.$baseConfirm("您确定退款此订单吗", null, async () => {
                    const {msg} = await modifyFastOrder({orderId, type,});
                    this.$baseMessage(msg, "success");
                    this.fetchData()
                  });
                }else {
                    this.$baseMessage('敬请期待', "success");
                    this.fetchData()
                }
            },
            async getCode() {
              this.dialogFormVisible = true
              const {data} = await getCode({ storeId:this.storeId,ident: 'fastOrder', page: 'yb_wm/shop/ffmode/goods'});
              this.codeimg = data ? data : ''
            },
        },
    }
</script>
<style lang="scss">
  .infastorder {
    .orderList {
      border-bottom: 1px solid #EBEEF5;
      background: #fff;

      .number {
        background: #4675e0;
        /*padding: 18px 12px;*/
        height: 57px;
        line-height: 57px;
        width: 75px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        border-radius: 5px;
      }
      .number2{background: #67C23A;}
      .type2{
        padding: 2px;
        border-radius: 3px;
      }
      .type {
        //background: #54BBA5;
        color: #fff;
        padding: 2px;
        border-radius: 3px;
      }
      .bg2{
        background: #2e63dc;
      }
      .bg3{
        background: #F56C6C;
      }
      .bg4{
        background: #adadad;
      }
    }

    .orderListHover, .orderList:hover {
      background: #f7f7f7;
    }

    .orderLeft {
      border-right: 1px solid #E1E1E1;
    }

    .orderMsg {
      min-height: 500px;
      /*border-left: 1px solid #E1E1E1;*/

      .shuju_title {
        background: #fff;
      }

      .msgNumber {
        color: #155BD4;
        font-size: 20px;
        font-weight: bold;
      }

      .goodsList {
        width: 510px;
        .el-table__header-wrapper {
          font-size: 12px;
        }

        .el-table__body-wrapper {
          font-size: 12px;
        }

        .goodTit {
          background: #f5f5f5;
        }
      }

      .anniu {
        .jiedan {
          width: 160px;
        }

        .el-button--danger.is-plain:hover {
          border-color: #fbc4c4;
          color: #fff;
        }
      }
    }

    .zwsj {
      min-height: 400px;
      font-size: 14px;
      color: #999;
    }
    .bgh{
      background: #F56C6C;
    }
  }

</style>
